<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
        @keyup.enter.native="getData"
        clearable
        v-model="listQuery.deviceBarcode"
        style="width: 150px; margin-right: 15px"
        class="filter-item"
        placeholder="请输入条码"
      ></el-input>
      <el-select    
        @keyup.enter.native="getData"
        clearable
        style="width: 150px; margin-right: 15px"
        class="filter-item"
        v-model="listQuery.type"
        placeholder="请选择状态"
      >
        <el-option
          v-for="item in stateList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-input
        @keyup.enter.native="getData"
        clearable
        v-model="listQuery.processOrder"
        style="width: 150px; margin-right: 15px"
        class="filter-item"
        placeholder="请输入工序"
      ></el-input>
      <!-- <el-date-picker
        @keyup.enter.native="getData"
        clearable
        style="width: 150px; margin-right: 15px"
        class="filter-item"
        v-model="listQuery.testTime"
        format="yyyy-MM-dd"
        value-format="timestamp"
        type="date"
        placeholder="选择测试时间">
      </el-date-picker> -->
      <el-input
        @keyup.enter.native="getData"
        clearable
        v-model="listQuery.processNo"
        style="width: 150px; margin-right: 15px"
        class="filter-item"
        placeholder="请输入工序编码"
      ></el-input>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="getData"
        >搜索</el-button
      >
    </div>

    <!-- table 表格 -->
    <el-table
      :data="tableInfo"
      element-loading-text="给我一首歌的时间"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="条码" prop="deviceBarcode" align="center" />
      <el-table-column label="状态" prop="type" align="center">
        <template slot-scope="scope">
          {{
            scope.row.type == "1"
              ? "成功"
              : scope.row.type == "2"
              ? "失败"
              : scope.row.type == "3"
              ? "重测"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="工序" prop="processOrder" align="center" />
      <el-table-column label="测试时间" prop="testTime" align="center" />
      <el-table-column label="工序编号" prop="processNo" align="center" />
    </el-table>

    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5, 10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-divider></el-divider>
    <!-- <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button> -->
  </div>
</template>
  
  <script>
import { hmsHwHmfind } from "@/api/emsPart.js";
export default {
  name: "emstestInquire",
  data() {
    return {
      stateList: [
        { name: "成功", id: 1 },
        { name: "失败", id: 2 },
        { name: "重测", id: 3 },
      ],
      listQuery: {
        page: 1,
        limit: 10,
      },
      total: 0, //返回信息总数
      formLabelWidth: "100px", //弹框内部组件的宽度设定
      dialogFormVisible: false, //变更弹窗显现条件
      modifyform: {
        //ECN变更表单
        ecnChangeId: "", //只显示给用户看，input框为disable
        version: "",
        produceName: "",
        ecnDesc: "",
      },
      tableInfo: [], //table表单内容
      userInfo: this.$store.state.user.userInfo,
    };
  },
  methods: {
    getData() {
      this.listQuery.page = 1;
      this.handleFilter();
    },
    // 导出excel
    async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.page = 1
          query.limit = 10000
          let res = await hmsHwHmfind(query)
          const { header, data } = this.transformDat(this.setSort(res.data.list))
          import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '喷涂车间员工扫码明细表', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        transformDat(res) {
          const mapInfo = {
            scanTime: '扫码时间',
            deviceBarcode: '条码',
            processName:'工艺名称',
            processSerial: '工序',
            machineId: '机台号',
            jobNumberStr: '员工工号',
            orderPlanNo: '计划批号',
            component: '元件编号',
            completionQuantity: '完成数量',
            standardManTime: '标准人时',
            obtainableTime: '能获得的工时',
            planNo: '工单号',
            processCount: '加工次数',
            ptSprayingArea: '喷涂面积',
            ptProtectionArea: '保护面积',
            ptProtectionCount: '保护个数',
            money: '金额',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          console.log('中文的表头', header)
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let isshow = this.userInfo.account == 'lishali' || this.userInfo.roleId == 14
          let arr1 = []
          newArr.forEach(item=>{
            let obj = {
              scanTime: item.scanTime,
              deviceBarcode: item.deviceBarcode,
              processName: item.processName,
              processSerial: item.processSerial,
              machineId: item.machineId,
              jobNumberStr: item.jobNumberStr,
              orderPlanNo: item.orderPlanNo,
              component: item.component,
              completionQuantity: (parseFloat(item.completionQuantity)/parseFloat(item.scanLimit)).toFixed(1),
              standardManTime: item.standardManTime,
              obtainableTime: item.obtainableTime,
              planNo: item.planNo,
              processCount: item.processCount,
              ptSprayingArea: item.ptSprayingArea,
              ptProtectionArea: item.ptProtectionArea,
              ptProtectionCount: item.ptProtectionCount,
            }
            if(isshow) { obj.money = item.money?parseFloat(item.money).toFixed(3):0 }
            arr1.push(obj)
          })
          return arr1
        },
    // 搜索按钮绑定的函数
    // 获取table表单数据与数据总数
    async handleFilter() {
      let query = Object.assign({}, this.listQuery);
      let { data } = await hmsHwHmfind(query);
      this.tableInfo = data.list;
      this.total = data.count;
    },
    // table表单下方的页码组件改变每页显示的数据条数
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.handleFilter();
    },
    // table表单下方的页码组件改变页面
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.handleFilter();
    },
  },
  // 进入页面获取table信息
  mounted() {
    this.handleFilter();
  },
};
</script>
  
  <style>
</style>